<template>
	<view class="container">
		<view class="shop-top">
			<view class="big">
				<!-- <video :src="src" autoplay muted title="2026-12-14 星期三 07:06:13" controls loop></video> -->
				<view class="player" v-if="monitor && monitor.deviceSerial">
					<ezplayer id="ezplayer" :accessToken="accessToken"
						:url="`rtmp://open.ys7.com/${monitor.deviceSerial}/${monitor.channelNo}/live`" plugins=""
						recPlayTime="" :width="width" :height="height" watermark="shuiyin" theme="" />
				</view>
			</view>
			<view class="list" v-if="monitorList.length > 0">
				<scroll-view class="scroll-view_H" scroll-x="true">

					<view class="item" :class="{on:findex==index}" v-for="(item,index) in monitorList" :key="index"
						@click="change(index,item)">
						<!-- <video :src="item.url" :title="item.name" :controls="false"></video> -->
						<image :src="item.picUrl" mode="aspectFill"></image>
					<!-- 	<view class="title">
							{{item.deviceName}}
						</view> -->
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="shop-data bg" v-if="data && data.id">
			<view class="t">
				{{data.name}}
			</view>
			<view class="p">
				{{data.address}}
			</view>
			<view class="p" v-if="data.distance">
				距您{{data.distance.toFixed(2)}}km
			</view>
		</view>
		<view class="shop-body bg">
			<u-parse :content="content"></u-parse>
		</view>
		<view class="footer" @click="gotoOrder">
			<view class="btn">
				<view class="t">
					去点餐
				</view>
				<view class="p">
					Order Now
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				findex: 0,
				content: "",
				id: '',
				data: {},
				longitude: "",
				latitude: "",
				monitorList: [],
				src: '',
				monitor: {},
				width: 0,
				height: 0,
				accessToken: ""
			}
		},
		onLoad(o) {

			let getWindowInfo = uni.getWindowInfo();
			this.width = getWindowInfo.screenWidth
			this.height = parseInt(this.width * 260 / 375)
			this.longitude = uni.getStorageSync("lng")
			this.latitude = uni.getStorageSync("lat")
			this.id = o.id
			this.getData()

		},
		methods: {
			getData() {
				this.$http.post('/app/homes/shopDetail', {
					shop_id: this.id,
					longitude: this.longitude,
					latitude: this.latitude,
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.data = res.data
						this.content = res.data.content
						this.monitorList = res.data.monitorList[0].channelList.filter(item => item.status == 1)
						this.monitorList[0].picUrl = require('@/static/2.jpg')
						this.monitorList[1].picUrl = require('@/static/1.jpg')
						this.monitor = this.monitorList[0]
						this.src = this.monitorList[0].url
						this.accessToken = res.data.accessToken
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			gotoOrder() {
				uni.setStorageSync('shopData', JSON.stringify(this.data))
				uni.switchTab({
					url: '/pages/index/orderFood'
				})
			},
			change(index, item) {
				if (this.findex != index) {
					this.findex = index
					this.monitor = this.monitorList[index]
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {


		.bg {
			margin: 20rpx auto;
			width: calc(100% - 40rpx);
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.shop-body {
			padding-bottom: 150rpx;
			color: #7B7B7B;
			font-size: 28rpx;
			line-height: 40rpx;
		}

		.shop-data {


			.t {

				line-height: 44rpx;


				font-size: 32rpx;
				color: #000000;
				text-align: left;

			}

			.p {
				margin-top: 10rpx;
				line-height: 34rpx;

				font-size: 24rpx;
				color: #B1B1B1;
				text-align: left;
			}
		}

		.shop-top {
			width: 100%;

			.list {
				white-space: nowrap;
				width: 100%;
				height: 265rpx;
				margin-top: 20rpx;

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;
					height: 100%;

					.item {
						display: inline-block;
						width: 400rpx;
						height: 260rpx;
						border-radius: 12rpx;
						border: 2rpx solid #fff;
						overflow: hidden;
						margin-left: 20rpx;
						position: relative;

						video {
							width: 100%;
							height: 100%;
						}

						image {
							width: 100%;
							height: 100%;
						}

						.title {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							height: 40rpx;
							line-height: 40rpx;
							padding: 0 20rpx;
							font-size: 24rpx;
							color: #fff;
							z-index: 999;
						}

					}

					.on {
						border: 2rpx solid #E51B00;
					}
				}
			}

			.big {
				width: 750rpx;
				min-height: 520rpx;

				.player {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
				}

				video {
					width: 100%;
					height: 100%;
				}
			}
		}

		.footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 20rpx;
			z-index: 999;
			box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(0, 0, 0, 0.2);
			background-color: #fff;

			.btn {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				background: #E51B00;
				border-radius: 50rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.t {
					font-size: 30rpx;
					font-weight: 600;
					color: #fff;
					height: 50rpx;
					line-height: 50rpx;
				}

				.p {
					font-size: 18rpx;
					color: #fff;
					height: 30rpx;
					line-height: 30rpx;
				}
			}
		}
	}
</style>